<template>
  <h2>分类管理</h2>
  <el-button class="addBtn" type="primary" round @click="categoryFormVisible = true">
    添加分类
  </el-button>
  <el-table border :data="categoryList" style="width: 100%">
    <el-table-column type="index" />
    <el-table-column prop="id" label="分类Id" width="180" />
    <el-table-column prop="name" label="分类名" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-tooltip :enterable="false" class="box-item" effect="dark" content="修改" placement="top">
          <el-button type="primary" :icon="Edit" circle @click="updateCategory(scope.row)" />
        </el-tooltip>

        <!-- 删除按钮 -->
        <el-button type="danger" :icon="Delete" circle @click="delCategoryHandler(scope.row.id, scope.row.name)" />
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加分类对话框 -->
  <el-dialog v-model="categoryFormVisible" title="添加分类">
    <el-form v-model="addCategoryData">
      <el-form-item label="分类名" :label-width="formLabelWidth">
        <el-input v-model="addCategoryData.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="categoryFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addCategoryHandle">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除分类对话框 -->
  <el-dialog v-model="upCategoryFormVisible" title="更新分类">
    <el-form v-model="upCategoryData">
      <el-form-item label="分类名" :label-width="formLabelWidth">
        <el-input v-model="upCategoryData.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="upCategoryFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateCategoryHandler">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
import { ref, reactive, inject, onMounted, onBeforeMount } from 'vue'
import { AdminStore } from '../../stores/manager'
import { useRouter, useRoute } from 'vue-router'
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()
const adminStore = AdminStore()
const axios = inject('axios')

// 分类列表
let categoryList = ref([]);

// 在挂载之前请求数据
onBeforeMount(() => {
  getCategoryData()
})

// 请求分类数据回调
const getCategoryData = async () => {
  const { data: res } = await axios.get('category/list')
  categoryList.value = res.data
}

// 添加分类
// 控制添加分类会话框的显示与隐藏
let categoryFormVisible = ref(false)
// 会话框宽度
const formLabelWidth = '140px'
// 数据
const addCategoryData = reactive({
  name: ''
})
// 添加分类回调
const addCategoryHandle = async () => {

  if (!addCategoryData.name.trim()) return ElMessage.warning('请填写分类名')

  const { data: res } = await axios.post('category/_token/add', { name: addCategoryData.name })

  if (res.status.code !== 200) return ElMessage.error('分类添加失败！')

  ElMessage.success('分类添加成功！')

  categoryFormVisible.value = false
  addCategoryData.name = ''
  getCategoryData()
}

// 删除分类
const delCategoryHandler = async (categoryId, categoryName) => {
  ElMessageBox.confirm(
    `确定删除'${categoryName}'`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const { data: res } = await axios.delete('category/_token/del', { data: { id: categoryId } })
      if (res.status.code != 200) return ElMessage.error('删除失败！')
      getCategoryData()
      console.log(res)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

// 控制修改分类会话框的显示与隐藏
let upCategoryFormVisible = ref(false)
let upCategoryData = reactive({
  id: '',
  name: ''
})

// 修改分类
const updateCategory = (data) => {
  upCategoryFormVisible.value = true
  upCategoryData.name = data.name
  upCategoryData.id = data.id
}

// 修改分类回调
const updateCategoryHandler = async () => {
  const { data: res } = await axios.put('category/_token/update', { id: upCategoryData.id, name: upCategoryData.name })
  if (res.status.code !== 200) return ElMessage.error('更新失败！')

  ElMessage.success('更新成功！')
  upCategoryFormVisible.value = false
  getCategoryData()
}
</script>
 
<style lang='less' scoped>
.addBtn {
  margin-bottom: 10px;
}

.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>